<template>
    <view class="recommend">
        <view class="recommend-header">
            <image
        class="horn"
        :src="EnumBG.HORN"
        mode="widthFix"
        style="width: 60rpx;"
        ></image>
    推荐玩法</view>
        <view class="recommend-items" >
                <view @click="toInfo(item.toUrl)" class="recommend-item" v-for="item in urls">
                    <image :src="item.url" />
                </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import playingStore from '@/store/playing';
import {  EnumBG } from "@/utils/content";
const playing = playingStore()
const urls = ref([
   {
    url: EnumBG.INDEXA,
    name:"答案之书",
    toUrl:"/subPackages_play/answers/answers",
   },
   {
    url: EnumBG.INDEXH,
    name:"身高测试",
    toUrl:"/subPackages_play/bodyHeight/bodyHeight",
   },
   {
    url: EnumBG.INDEXN,
    name:"答案之书",
    toUrl:"/subPackages_play/homophonic/homophonic",
   },
   {
    url: EnumBG.INDEXF,
    name:"退休金",
    toUrl:"/subPackages_play/fund/fund",
   },
   {
    url: EnumBG.INDEXMONEY,
    name:"金额大小转换",
    toUrl:"/subPackages_play/money/money",
   },
   {
    url: EnumBG.INDEXABMI,
    name:"bmi",
    toUrl:"/subPackages_play/bmi/bmi",
   },
])

const toInfo = (url:string)=>{
    playing.inUser = false
    playing.playingId = ""
    uni.navigateTo({
        url:url    
  }) 
}

</script>
<style>
.recommend-header{
    display: flex;
    justify-content: center;
    align-items: center;

}
.recommend-item{
    width: 223rpx;
    height: 300rpx;
    border: white 2rpx solid;
    margin: 15rpx 0;
    border-radius: 20rpx;

}
.recommend-items{
    margin: 0 20rpx;
    margin-top: -10rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.recommend{
    position: absolute;
    top: 46%;
}
image{
    width: 100%;
    height: 100%;
    border-radius: 20rpx;
}

</style>